import styles from '@/pages/battle/index.less';

import { Image, Flex } from 'react-vant';
import Progress from '@/components/Progress';
import CountDown from '@/pages/battle/components/countDown';
export default (props) => {
  return (
    <>
      <Flex justify="between" align="center" className={styles.flex}>
        <Flex
          direction="column"
          justify="around"
          className={styles.flex}
          style={{ width: '40%' }}
        >
          <Progress
            round
            contentColor={'red'}
            parNum={props.curSprite.attr.maxAttr.hp}
            contentNum={props.curSprite.attr.currAttr.hp}
          ></Progress>
          {/* <Rate
                        icon={<Fire />}
                        voidIcon={<FireO />}
                        value={value}
                        onChange={setValue}
                    /> */}
          <span> {props.curSprite && props.curSprite.name}</span>
        </Flex>
        <Flex
          direction="column"
          justify="around"
          className={styles.flex}
          style={{ width: '40%' }}
        >
          <Progress
            round
            contentColor={'blue'}
            parNum={props.boss.attr.maxAttr.hp}
            contentNum={props.boss.attr.currAttr.hp}
            mirror
          ></Progress>
          {/* <Rate
                        icon={<Fire />}
                        voidIcon={<FireO />}
                        value={value}
                        onChange={setValue}
                    /> */}
          <span style={{ textAlign: 'right' }}>
            {' '}
            {props.boss && props.boss.name}
          </span>
        </Flex>
      </Flex>
      <Flex
        justify="between"
        align="center"
        className={styles.flex + ' ' + styles.content}
      >
        {/* <Image width="100" src='http://rew00265f.hb-bkt.clouddn.com/img/202207242201386.png' height="100" /> */}
        <Image width="100" height="100" />

        <CountDown
          changeCurRound={props.changeCurRound}
          count={props.count}
          setCount={props.setCount}
        ></CountDown>

        <div className={styles.bossContent}>
          {/* <Image width="100" src='http://rew00265f.hb-bkt.clouddn.com/img/202207242201386.png' height="100" /> */}

          <Image width="100" height="100" />
        </div>
      </Flex>
    </>
  );
};
